<plugin>
    <div class="plugin-content">
        <b>Flight plans</b>

        <ul>
            <li class="clickable-size" data-ref="fpl1">LKPR - LSZR</li>
            <li class="clickable-size" data-ref="fpl2">EGLL - LKPR</li>
            <li class="clickable-size" data-ref="fpl3">LKPR - EDDB</li>
        </ul>

        <small
            >Use right side window for apps that that are fine with narrow
            window. <br /><br />
            This plugin also demonstrates using GeoJSON on a map.</small
        >
    </div>
    <script>
        import map from '@windy/map';

        let geoJSON = null;

        //	Whenever your plugin is mounted, all elements with 'data-ref'
        //	attributes are exposed in this.refs object
        this.refs.fpl1.onclick = () => loadFpl('fpl1');
        this.refs.fpl2.onclick = () => loadFpl('fpl2');
        this.refs.fpl3.onclick = () => loadFpl('fpl3');

        this.onclose = () => removeFpl();

        const loadFpl = file => {
            removeFpl();

            fetch(`https://www.windy.com/img/windy-plugins/${file}.json`)
                .then(response => response.json())
                .then(result => {
                    geoJSON = L.geoJson(result).addTo(map);

                    const bounds = geoJSON.getBounds();

                    map.fitBounds(bounds);
                });
        };

        const removeFpl = () => {
            if (geoJSON) {
                map.removeLayer(geoJSON);
                geoJSON = null;
            }
        };
    </script>
</plugin>
